<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- wrapper 类名  css 取名的词汇 -->
  <div class="wrapper">
    <h2>LOCAL TAPAS</h2>
    <ul class="plates">
      <li>Loading Tapas...</li>
    </ul>
    <form class="add-items" name="itemForm">
      <input type="text" name="item" placeholder="Item Name" required id="
      ">
      <input type="submit" value="+ Add Item">
    </form>
  </div>
  <script>
  const itemForm = document.forms["itemForm"];
  const items = [
    "三清山",
    "方志敏故居",
    "铜锣山"
  ]
  //  字符串模板 
  //  箭头函数 
  // console.log(items.map((item) => `<li>${item}</li>`))
  const itemsList = document.querySelector('.plates');
  const userinput = document.getElementById('userinput');
  
  // map  es6 数组遍历的方法， 数据编程一个新的数组 
  itemsList.innerHTML = items.map(item => `
    <li>${item}</li>
  `).join('')
  if (userinput.value != '') {
  items.splice(-1,0,userinput.value)
  }
  console.log(items);
  itemForm.addEventListener('submit', (e) => {
    e.preventDefault(); 
  }, false);
 
 
  </script>
</body>
</html>
